import React, { Component } from 'react';
import { connectRouter } from '../../../mixins/router';
import api from '../../../api/api';
import { Row, Col, Card } from 'antd';
import './index.scss';
import { getTask } from '../../../api';
const phoneType = [
    {id:10,label:"坐席接听"},
    {id:11,label:"振铃未接听"},
    {id:12,label:"ivr放弃"},
    {id:13,label:"排队放弃"},
    {id:14,label:"非服务时间来电"},
    {id:15,label:"呼入话机异常"},
    {id:16,label:"呼入网络异常"},
    {id:17,label:"排队超时"},
    {id:18,label:"客户速挂"},
    {id:20,label:"客户接听"},
    {id:21,label:"客户未接听"},
    {id:25,label:"呼出话机异常"},
    {id:26,label:"呼出网络异常"},
    {id:781,label:"客户拒接"},
    {id:774,label:"号码空号"},
    {id:770,label:"客户关机"},
    {id:771,label:"客户停机"},
    {id:772,label:"暂时无法接通"},
    {id:773,label:"客户正在通话"},
    {id:30,label:"第三方接听"},
    {id:31,label:"第三方无法接通（所有其他的因素）"},
    {id:32,label:"第三方振铃未接听（包括长时间无应答、第三方拒接）"},
]
const callOffType = [
    {id:0,label:"系统超时挂断"},
    {id:1,label:"客服挂断"},
    {id:2,label:"客户挂断"}
]
class Details extends Component {
  constructor(props) {
    super(props);
    this.state = {
      main: {},
    };
    this.callId = undefined
  }
  componentWillMount() {
    // this.callId = this.props.match.params.callId || ''
    this.getCallDetailData()
  }
  async getCallDetailData(){
    let mainData = await api.getCallDetails(this.props.callId)
    const getTaskTypeList = await api.getTaskType()
    let getLabel = "", getScendLabel = ""
    if((mainData && mainData.taskType) || (mainData && mainData.taskType == "0")){
      getLabel = getTaskTypeList.find((item) => {
        return item.id == mainData.taskType
      })
      if(mainData.taskReclassify){
        getScendLabel = getTaskTypeList.find((item) => {
          if(item.id == mainData.taskType){
            let getSecondaryType = item.secondaryType.find((kids) => {
              return kids.id == mainData.taskReclassify
            })
            mainData.taskReclassify = getSecondaryType.name || ""
            return getSecondaryType
          }
        })
      }
    }
    mainData.taskType = getLabel.name

    this.setState({
      main:mainData
    })
  }
  getFindVal = (id)=>{
    if(id){
      let getLabel = phoneType.find((item)=>{
        return item.id == id
      })
      return (<span>{getLabel.label}</span>)
    }
  }
  getFindCallOffVal = (id) => {
    if (id || id == "0"){
      let getLabel = callOffType.find((item)=>{
        return item.id == id
      })
      return (<span>{getLabel.label}</span>)
    }
  }
  format = (seconds) => {
    let hour = Math.floor(seconds / 3600) >= 10 ? Math.floor(seconds / 3600) : '0' + Math.floor(seconds / 3600);
    seconds -= 3600 * hour;
    let min = Math.floor(seconds / 60) >= 10 ? Math.floor(seconds / 60) : '0' + Math.floor(seconds / 60);
    seconds -= 60 * min;
    let sec = seconds >= 10 ? seconds : '0' + seconds;
    return hour + ':' + min + ':' + sec;
  }
  render() {
    const {main} = this.state
    return (
      <div className="gutter-example">
        <Card title="任务信息" bordered={false}>
          <Row gutter={16}>
            <Col className="gutter-row" span={6}>
              <div className="gutter-box">会员/用户：{main.patientName} <span className="bgGreen">{main.callType=='1'?"呼出":"呼入"}</span></div>
            </Col>
            <Col className="gutter-row" span={6}>
              <div className="gutter-box">类型(一级)：{main.taskType}</div>
            </Col>
            <Col className="gutter-row" span={6}>
              <div className="gutter-box">类型(二级)：{main.taskReclassify}</div>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col className="gutter-row" span={24}>
              <div className="gutter-box">主题：{main.subject}</div>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col className="gutter-row" span={24}>
              <div className="gutter-box">沟通备注：{main.content}</div>
            </Col>
          </Row>
        </Card>
        <Card title="会员信息" bordered={false}>
          <Row gutter={16}>
            <Col className="gutter-row" span={8}>
              <div className="gutter-box">主叫号码：{main.caller}</div>
            </Col>
            <Col className="gutter-row" span={8}>
              <div className="gutter-box">被叫号码：{main.callee}</div>
            </Col>
            <Col className="gutter-row" span={8}>
              <div className="gutter-box">归属地：{main.province} {main.city}</div>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col className="gutter-row" span={8}>
              {/* <div className="gutter-box">接听状态：{main.callResult}</div> */}
              <div className="gutter-box">接听状态：{this.getFindVal(main.callResult)}</div>
            </Col>
            <Col className="gutter-row" span={8}>
              <div className="gutter-box">呼叫时间：{main.createDate}</div>
            </Col>
            <Col className="gutter-row" span={8}>
              <div className="gutter-box">排队时长：{this.format(main.queueDuration)}</div>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col className="gutter-row" span={8}>
              <div className="gutter-box">通话时长：{this.format(main.duration)}</div>
            </Col>
            <Col className="gutter-row" span={8}>
              <div className="gutter-box">挂断方：{this.getFindCallOffVal(main.hangupType)}</div>
            </Col>
            <Col className="gutter-row" span={8}>
              <div className="gutter-box">满意度：{main.satisfyValue}</div>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col className="gutter-row" span={24}>
              <div className="gutter-box boxPosition">
                录音文件：
                { main.videoUrl?<audio controls>
                  <source src={main.videoUrl} type="audio/ogg" />
                  <source src={main.videoUrl} type="audio/mpeg" />
                  您的浏览器不支持 audio 元素。
                </audio>:null}
              </div>
            </Col>
          </Row>
        </Card>
        <Card title="客服信息" bordered={false}>
          <Row gutter={16}>
            <Col className="gutter-row" span={8}>
            <div className="gutter-box">客服：{main.userName}</div>
            </Col>
            <Col className="gutter-row" span={16}>
            <div className="gutter-box">坐席ID：{main.agentId}</div>
            </Col>
          </Row>
        </Card>
      </div>
    );
  }
}
// export default connectRouter(Details)
export default Details;
